<template>
  <a-dropdown :trigger="['click']">
    <a
      class="ant-dropdown-link"
      :style="{ color: titleColor, fontSize: titleSize }"
      @click="e => e.preventDefault()"
    >
      {{ LanguageNameList[appStore.language] }}<DownOutlined
    /></a>
    <template v-slot:overlay>
      <a-menu class="dropdown-panel">
        <a-menu-item
          v-for="(value, key) of LanguageNameList"
          :key="key"
          @click="changeLanguage2(key)"
        >
          <span :style="{ color: textColor }">{{ LanguageNameList[key] }}</span>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<script lang="ts" setup>
import { inject, computed } from 'vue';
import { LanguageNameList } from '@/i18n';
import { DownOutlined } from '@ant-design/icons-vue';
import { useAppStore } from '@/pinia/modules/app';
import { Locales } from '@/i18n';

const appStore = useAppStore();
const currentLanguage = computed(() => Locales[appStore.language]);

const props = defineProps({
  titleColor: {
    type: String,
    default: 'red',
  },
  textColor: {
    type: String,
    default: 'red',
  },
  titleSize: {
    type: String,
    default: '16px',
  },
});

const changeLanguage = inject('changeLanguage');
const changeLanguage2 = function (key: any) {
  if (changeLanguage instanceof Function) {
    changeLanguage(key);
  }
};
</script>

<style lang="less" scoped>
.dropdown-panel {
  background: rgba(255, 255, 255, 0.3);
  margin-top: 10px;
  ::v-deep(.ant-dropdown-menu-item-active) {
    background: transparent;
    transform: translateX(2px);
    transition: all 0.2s ease-in-out;
  }
}
.dropdown-panel::before {
  content: '';
  display: block;
  border: 10px solid transparent;
  border-bottom-color: rgba(255, 255, 255, 0.3);
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
}
</style>
